<template>
  <div class="ratings-wrapper" ref="scrollWrapper">
    <div>
      <div class="rating-info border-bottom">
        <div class="info-left border-right">
          <p class="total-score">5.0</p>
          <p class="total">综合评价</p>
          <p class="compare">高于周边商家89%</p>
        </div>
        <div class="info-right">
          <div class="service">
            <div class="desc">服务态度</div>
            <div class="star-wrapper">
              <star :score="4.7"></star>
            </div>
            <div class="score">4.7</div>
          </div>
          <div class="rating">
            <div class="desc">菜品评价</div>
            <div class="star-wrapper">
              <star :score="4.3"></star>
            </div>
            <div class="score">4.3</div>
          </div>
          <div class="delivery-time">
            <div class="desc">送达时间</div>
            <div class="star-wrapper">
              34分钟送达
            </div>
          </div>
        </div>
      </div>
      <div class="device"></div>
      <div class="price-sort">
        <span class="sort-item all">全部 {{allRate}}</span>
        <span class="sort-item good">满意 {{goodRate}}</span>
        <span class="sort-item bad">不满意 {{badRate}}</span>
      </div>
      <div class="ratings">
        <div class="rating-item border-top" v-for="(rating, index) of ratings" :key="index">
          <div class="time">{{rating.rateTime | getTime}}</div>
          <img class="avatar" :src="rating.avatar">
          <div class="user">
            <div class="number">{{rating.userName}}</div>
            <div class="star-wrapper">
              <star :score="rating.score"></star>
              <span class="super" v-if="rating.rateType == 0">超赞</span>
            </div>
            <div class="description" v-if="rating.text">
              {{rating.text}}
            </div>
            <div class="imgs" v-if="showImgs(rating)">
              <img class="img-item"
                v-for="(imgSrc, i) of rating.rateImgs" :key="i"
                :src="imgSrc"
              >
            </div>
            <div class="foods" v-if="showRecmmend(rating)">
              <span class="iconfont zan-icon">&#xe603;</span>
              <span class="orderfood"
                v-for="(food, foodIndex) of rating.recommend" :key="foodIndex"
              >{{food}}</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import BScroll from 'better-scroll'
import Star from '@/pages/common/Star'
import { mapState } from 'vuex'
export default {
  name: 'StoreRatings',
  data () {
    return {
      allRate: 0,
      goodRate: 0,
      badRate: 0
    }
  },
  components: {
    Star
  },
  mounted () {
    this.$nextTick(() => {
      this.scroll = new BScroll(this.$refs.scrollWrapper, {
        click: true
      })
      this.ratings.forEach(rate => {
        if (rate.rateType === 0) {
          // 好评 满意
          this.goodRate++
        } else {
          this.badRate++
        }
        this.allRate++
      })
    })
  },
  computed: {
    ...mapState(['ratings'])
  },
  methods: {
    showRecmmend (rating) {
      if (!rating.recommend || rating.recommend.length === 0) {
        return false
      } else {
        return true
      }
    },
    showImgs (rating) {
      if (!rating.rateImgs || rating.rateImgs.length === 0) {
        return false
      } else {
        return true
      }
    }
  },
  filters: {
    getTime (time) {
      time = new Date(time)
      return time.toLocaleDateString().split('/').join('-')
    }
  }
}
</script>

<style lang="stylus" scoped>
  .border-right::before,  .border-bottom::before, .border-top::before
    border-color #dddddd
  .ratings-wrapper
    height 100%
    .rating-info
      height 1.92rem
      padding .3rem
      .info-left
        display inline-block
        vertical-align top
        width 2.1rem
        height 100%
        margin-right .3rem
        text-align center
        .total-score
          font-size .5rem
          color #ff6000
        .total
          font-size .26rem
          line-height 1.7
        .compare
          font-size .26rem
          color #999999
          transform scale(0.85)
      .info-right
        display inline-block
        line-height .25rem
        font-size .25rem
        font-weight 200
        .rating
          margin .28rem 0
        .desc
          display inline-block
          margin-right .2rem
        .star-wrapper
          display inline-block
          margin-right .2rem
        .score
          display inline-block
          color #f60
    .device
      height .3rem
      background-color #eeeeee
    .price-sort
      padding .2rem .3rem 0
      font-size .25rem
      color #000000
      .sort-item
        display inline-block
        padding .2rem
        border-radius .04rem
        margin 0 .2rem .2rem 0
        &.all
          color #ffffff
          background-color rgb(0, 160, 220)
        &.good
          background-color skyblue
        &.bad
          background-color #dddddd
    .ratings
      padding 0 .2rem
      .rating-item
        position relative
        display flex
        padding .2rem 0
        .time
          position absolute
          top .2rem
          right 0.2rem
          display inline-block
          font-size .25rem
          color #999
          font-weight 200
        .avatar
          width .6rem
          height 0.6rem
          border-radius 50%
          margin-right .2rem
        .user
          flex 1
          font-size .25rem
          .star-wrapper
            margin .2rem 0
            .super
              color #ff6600
              font-weight 200
          .description
            margin-bottom .2rem
            line-height 1.5
          .imgs
            overflow hidden
            margin-bottom .2rem
            .img-item
              float left
              width 48%
              padding 0 2% 2% 0
          .foods
            font-size 0
            .zan-icon
              font-size .33rem
              margin-right .2rem
            .orderfood
              display inline-block
              font-size .24rem
              font-weight 200
              padding .1rem .15rem
              background-color #ebf5ff
              border-radius .04rem
              margin 0 .1rem .1rem 0
</style>
